<template>
  <div class="container">
    <!-- 搜索框 -->
    <el-form
      :model="formData"
      class="demo-form-inline"
      ref="formDataRef"
      :inline="true"
    >
      <div class="leftForm">
        <template
          v-for="(objItem, index) in formObj.item"
          v-show="!objItem.notShow"
          :key="index"
        >
          <el-form-item
            :label="objItem.label"
            :prop="objItem.prop"
            :rules="objItem.rules"
          >
            <!-- inupt输入框 -->
            <el-input
              v-if="objItem.input"
              v-model="formData[objItem.prop]"
              size="default"
              :disabled="objItem.disabled"
              :placeholder="objItem.placeholder"
              @input="objItem.handleInput"
              clearable
            />
            <!-- select选择器 -->
            <el-select
              v-if="objItem.select"
              v-model="formData[objItem.prop]"
              size="default"
              :disabled="objItem.disabled"
              :placeholder="objItem.placeholder"
              @change="objItem.change"
              clearable
            >
              <el-option
                v-for="(options, sIndex) in objItem.options"
                :key="sIndex"
                :label="options.label"
                :value="options.value"
              />
            </el-select>
          </el-form-item>
        </template>
        <el-form-item>
          <template v-for="(objBtn, index) in formObj.btn" :key="index">
            <el-button
              v-show="objBtn.showHide ? objBtn.showHide : true"
              :disabled="objBtn.disabled ? objBtn.disabled : false"
              :type="objBtn.type ? objBtn.type : 'primary'"
              :size="objBtn.size ? objBtn.size : 'default'"
              :icon="objBtn.icon ? objBtn.icon : ''"
              :class="objBtn.className ? objBtn.className : ''"
              @click="objBtn.clickFun(formDataRef)"
              >{{ objBtn.name ? objBtn.name : "" }}</el-button
            >
          </template>
        </el-form-item>
      </div>
    </el-form>
    <!-- 其他操作按钮 -->
    <div class="rightForm" v-if="tip == '草稿' ? true : false">
      <el-button
        class="newBtn el-button-primary"
        type="primary"
        @click="handleAdd"
        v-hasPermi="['system:listener:add']"
        ><el-icon class="iconText"> <Plus /> </el-icon>新建</el-button
      >
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  formObj: {
    type: Object,
    default: () => {},
  },
  formData: {
    type: Object,
    default: () => {},
  },
  tip: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["handleAdd"]);
const handleAdd = () => {
  emit("handleAdd");
};
const formDataRef = ref("");
</script>

<style lang="scss" scoped>
@import "@/assets/styles/btn.scss";

.container {
  display: flex;
  justify-content: space-between;
  // align-items: center;
}

.newBtn {
  .iconText {
    margin-right: 5px;
    font-size: 14px;
  }
}

:deep(.el-button.el-button--primary) {
  margin-right: 10px !important;
}

.demo-form-inline {
  width: 100% !important;
  // display: flex;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
